<template>
  <div>

    <el-row>
      <el-col :span="12">
        <h3>一、输入框</h3>
        <div>
          <h4>1.1、基本使用</h4>
          <el-input v-model="input" clearable placeholder="请输入内容"></el-input>

        </div>

        <div>
          <h4>1.2、密码框</h4>
          <el-input v-model="input" clearable placeholder="请输入内容" show-password></el-input>

        </div>

        <div>
          <h4>1.3、带icon</h4>
          <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1">
          </el-input>
        </div>

        <div>
          <h4>1.4、文本域</h4>
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea">
          </el-input>

        </div>

        <div>
          <h4>1.5、复合型输入框</h4>
          <el-input size="mini" placeholder="请输入内容" v-model="input3" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择" style="    width: 100px;">
              <el-option label="GET" value="GET"></el-option>
              <el-option label="POST" value="POST"></el-option>
              <el-option label="DELETE" value="DELETE"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search">请求</el-button>
          </el-input>

        </div>
        <div>
          <h4>1.6、带输入建议</h4>
          <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>

        </div>

        <div>

        </div>

      </el-col>

      <el-col :span="1">
        <div class="line"></div>
      </el-col>

      <el-col :span="11">
        <h3>二、输入框</h3>

        <div>
          <h4>1.7、自定义模板</h4>

          <el-autocomplete popper-class="my-autocomplete" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
            <i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick">
            </i>
            <template slot-scope="{ item }">
              <!-- <div class="name">{{ item.value }}</div> -->
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>

        </div>
        <div>
          <h4>1.8、长度限制</h4>
          <el-input type="text" @focus="focusInput" placeholder="请输入内容" v-model="text" maxlength="10" show-word-limit>
          </el-input>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data () {
    return {
      text: '',
      input: '片言',
      input1: '片言',
      textarea: '4444',
      input3: '/elementUI/radio/button',
      select: 'GET',
      state1: '',
      restaurants: [
        { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
        { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
        { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
        { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
        { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
        { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
        { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
        { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
      ],
    }
  },
  methods: {

    querySearch (queryString, cb) {

      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },

    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.address.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },


    handleSelect () { },

    handleIconClick () { },

    focusInput (event) {
      console.log(event)

    }

  }
}
</script>

<style scoped>
.line {
  height: 1000px;
  margin-left: 8px;
  border-left: 1px solid black;
}
</style>